<template>

  <tree-table
    class="tree"
    :data="items"
    :columns="columns"
    :show-index="true"
    index-text="#"
    :selection-type="false"
    :expand-type="false"
    border
  >
    <!-- 是否有效 -->
    <template slot="isok" slot-scope="scope">
      <div>{{ scope.row.ymorgtreecode }}</div>
    </template>
    <!-- 排序 -->
    <template slot="order" slot-scope="scope">
      <a-tag
        size="mini"
        color="blue"
        v-if="scope.row.ymorgtreecode.length === 3"
        >一级</a-tag
      >
      <a-tag
        type="success"
        size="mini"
        color="green"
        v-else-if="scope.row.ymorgtreecode.length === 6"
        >二级</a-tag
      >
      <a-tag type="warning" color="pink" size="mini" v-else>三级</a-tag>
    </template>
    <!-- 操作 -->
    <template slot="opt" slot-scope="scope">
      <a-button
        class="btn"
        :type="btn[0].type"
        icon="plus-square"
        v-if="ifShowAdd"
        @click="addbtn(scope.row)"
        >{{ btn[0].title }}</a-button
      >
      <a-button
        class="btn"
        :type="btn[1].type"
        icon="edit"
        @click="changed(scope.row)"
        >{{ btn[1].title }}</a-button
      >
      <a-button
        class="btn"
        type="danger"
        icon="delete"
        v-if="ifShowDel"
        @click="showModal(scope.row)"
        >{{ btn[2].title }}</a-button
      >
    </template>
    <!-- 分页区域 -->
  </tree-table>
</template>

<script>
import vue from '../../main'
export default {
  name: "Trees",
  props: {
    ifShowAdd:{
      type:Boolean
    },
    ifShowDel:{
      type:Boolean
    },
    columns: {
      type: Array,
    },
    items: {
      type: Array,
    },
    btn: {
      type: Array,
    },
  },
  created(){
    console.log(this.$il8n)
  },
  methods: {
    addbtn(row) {
      this.$emit("watchChild", row);
    },
    showModal(row) {
      this.$emit("revmo", row);
    },
    changed(row){
     this.$emit("changed", row);
    }
  },
};
</script>

<style scoped lang="scss">
.btn {
  width: 73px;
  font-size: 10px;
  margin-left: 10px;
}
.btn-dispo {
  margin-left: 30px;
}
.tree {
  margin-top: 30px;
}
.box-has {
  display: flex;
}
/deep/ .ant-form-item-control-wrapper {
  width: 100%;
}
</style>